<template>
<div>
  <!-- 
    v-model用在其他表单元上的方法
   -->
   <!-- 
    下拉框：
      注意：v-model是绑定在select标签上的
    -->
    <select v-model="city" placeholder="请选择城市" name="" id="">
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="上海">上海</option>
    </select>
    <h1>{{ city }}</h1>
    <!-- 
      单选框
     -->
     <span>性别：</span>
    <input v-model="sex" type="radio" name="sex" value="男">男
    <input v-model="sex" type="radio" name="sex" value="女">女
    <h1>{{ sex }}</h1>

    <!-- 
      复选框:
        v-model绑定的变量的值
          为非数组：则和复选框的checked属性双向绑定在一起
          为数组：则和复选框的value属性双向绑定在一起
     -->
     <span>爱好：</span>
     <input v-model="hobby" type="checkbox" value="读书"> 读书
     <input v-model="hobby" type="checkbox" value="写字"> 写字
     <input v-model="hobby" type="checkbox" value="敲代码"> 敲代码
      <h1>{{ hobby }}</h1>
</div>
</template>
<script>
export default {
  data(){
    return {
      city: '',
      sex: '男',
      // hobby: "",
      hobby: []
    }
  }
}
</script>
<style scoped>
</style>